<template>
    <div class="activity-phone-preview-wrap" :style="phonePreviewStyle">
        <img src="@renderer/assets/imgs/phonePreview/activity_phone_title.png" class="phone-state" />
        <div class="activity-phone-material">
            <div v-if="!isGroupChat" class="activity-phone-title">
                <el-icon><ArrowLeft /></el-icon>
                <div>
                    <strong>企业员工昵称</strong>
                    <div class="enterprie-name">{{ user.CorpShortName }}</div>
                </div>
            </div>
            <div v-else class="activity-phone-title">
                <el-icon><ArrowLeft /></el-icon>
                <div class="title">
                    <div class="enterprie-name">群聊名称(200)</div>
                    <img class="ionic" src="@renderer/assets/imgs/phonePreview/enterprisewechat.png" />
                </div>
            </div>
            <el-scrollbar :height="scrollHeight">
                <slot></slot>
            </el-scrollbar>
        </div>
        <img src="@renderer/assets/imgs/phonePreview/welcome_phone_bar.png" class="phone-bar" />
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { isNumber } from 'lodash';
import { useStore } from '@renderer/store/index'
const store = useStore();
const user = store.getters['common/getUserInfo'];

const props = withDefaults(
    defineProps<{
        /** 样机宽度，高度会根据9:16自动计算最小高度 */
        width?: string | number;
        /** 滚动条高度 */
        scrollHeight?: string | number;
        scale?: number;
        /** 是否展示头部手机状态 */
        showHeader: boolean;
        isGroupChat: boolean;
    }>(),
    {
        width: 320,
        scale: 1,
        scrollHeight: undefined,
        showHeader: true,
        isGroupChat: false
    }
);

const phonePreviewStyle = computed(() => {
    return {
        '--width': isNumber(props.width) ? props.width + 'px' : props.width,
        transform: props.scale ? `scale(${props.scale})` : undefined
    };
});
</script>

<style scoped lang="scss">
.activity-phone-material {
    position: relative;
    flex: 1;
    z-index: 2;
    vertical-align: middle;
    background-color: rgb(240 245 247 / 100%);
    overflow: hidden;

    :deep(.el-scrollbar__view),
    :deep(.el-scrollbar__wrap) {
        vertical-align: middle;
    }

    :deep(.el-scrollbar__wrap) {
        background-color: #f0f0f2;
    }
}

.phone-bar {
    width: 100%;
    border-radius: 0 0 30px 30px;
}

.phone-state {
    border-radius: 30px 30px 0 0;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #fcfcfc;
    vertical-align: middle;
}

.activity-phone-preview-wrap {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 40px;
    background-color: #f0f5f7;
    box-shadow: inset 0 2px 4px 0 #d9e7e8;
    width: var(--width);
    height: 68vh;
    min-height: calc(var(--width) * 16 / 9);
}

.activity-phone-title {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding-left: 6px;
    text-align: center;
    color: #000;
    background-color: #fff;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-size: 14px;
    font-weight: 500;

    .title {
        display: flex;
        justify-content: center;
        align-items: center;

        .ionic {
            width: auto;
            height: 13px;
            margin-left: 3px;
            margin-top: 4px;
        }
    }

    > div {
        width: 100%;

        > strong {
            display: block;
        }

        .enterprie-name {
            margin-top: 2px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            font-size: 13px;
        }
    }

}
</style>
